	<include file="public@head"/>
	<style>
	.h1, .h2, .h3, .h4, .h5, .h6 {
	    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
	    color: #313944;
	    line-height: 1.5;
	    letter-spacing: .5px;
	}
	.wiget-box{
		    padding: 20px 20px 0px;
	}
	.wiget-box-3{
		width:23%;
		float: left;
		margin-left: 15px;
	}
	.wiget-box-2{
		width:46%;
		float: left;
		margin-left: 15px;
	}
	.wiget-box-1{
		width:100%;
		float: left;
	}
	.card {
	    margin-bottom: 14px;
	    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.035);
	    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.035);
	}
	.card-body {
	    padding: 24px 24px;
	}
	.m-t-0 {
	    margin-top: 0px!important;
	}

	.text-white {
	    color: #ffffff!important;
	}
	.img-avatar-48 {
	    width: 48px;
	    height: 48px;
	    line-height: 48px;
	}

	.img-avatar {
	    display: inline-block !important;
	    text-align: center;
	    vertical-align: middle;
	    -webkit-border-radius: 50%;
	    border-radius: 50%;
	}
	.bg-translucent {
	    background-color: rgba(255, 255, 255, 0.175);
	}
	.chartbox{
		position: relative;
	}
	.tips{
		position: absolute;
		right: 10%;
		top: 40px;
		z-index: 2;
		background-color: #fff;
		box-shadow:0px 0px 10px 0px rgba(0,0,0,0.09);
		border-radius:5px;
		width: 200px;
		padding: 10px 20px;
	}
	.tips h3{
		color: rgba(81, 138, 242, 1);
		text-align: center;
	}
	</style>
</head>

<body>
	<div class="wiget-box" style="padding-bottom: 0px;">
		<div class="grid-item col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
		            <h3 class="panel-title">数据一览</h3>
		        </div>
		        <div class="panel-body">
			          <div class="wiget-box-3">
			            <div class="card bg-info">
			              <div class="card-body clearfix">
			                <div class="pull-left">
			                  <p class="h6 text-white m-t-0">今日收入</p>
			                  <p class="h3 text-white m-b-0">102,125.00</p>
			                </div>
			              </div>
			            </div>
			          </div>
	          
			          <div class="wiget-box-3">
			            <div class="card bg-danger">
			              <div class="card-body clearfix">
			                <div class="pull-left">
			                  <p class="h6 text-white m-t-0">用户总数</p>
			                  <p class="h3 text-white m-b-0">920,000</p>
			                </div>
			              </div>
			            </div>
			          </div>
	          
			          <div class="wiget-box-3">
			            <div class="card bg-success">
			              <div class="card-body clearfix">
			                <div class="pull-left">
			                  <p class="h6 text-white m-t-0">下载总量</p>
			                  <p class="h3 text-white m-b-0">34,005,000</p>
			                </div>
			              </div>
			            </div>
			          </div>
	          
			          <div class="wiget-box-3">
			            <div class="card bg-warning">
			              <div class="card-body clearfix">
			                <div class="pull-left">
			                  <p class="h6 text-white m-t-0">新增留言</p>
			                  <p class="h3 text-white m-b-0">153 条</p>
			                </div>
			              </div>
			            </div>
			          </div>
		        </div>
			</div>
		</div>
	</div>
	<div class="wiget-box" style="padding-bottom: 0px;">
		<div class="grid-item col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
		            <h3 class="panel-title">订单统计</h3>
		        </div>
		        <div class="panel-body">
		        	<div class="chart" id="chart1"></div>
		        </div>
		    </div>
		</div>
	</div>

	<div class="wiget-box" style="padding-bottom: 0px;">
		<div class="grid-item col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
		            <h3 class="panel-title">奖励统计</h3>
		        </div>
		        <div class="panel-body">
		        	<div class="chart" id="chart2"></div>
		        </div>
		    </div>
		</div>
	</div>
	<include file="public@scripts"/>
	<script type="text/javascript">
		$(function () {
			var chart1 = echarts.init($("#chart1")[0]);
			var chart2 = echarts.init($("#chart2")[0]);
			chart1.setOption({
				title: {
					text: '数据统计',
					left: '8%'
				},
				xAxis: {
					type: 'category',
					name: '时间',
					splitLine: {
						interval: 0,
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
					boundaryGap: true,
					data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
					axisLabel: {
						formatter: '{value} 日'
					}
				},
				yAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							type: 'dashed'
						}
					},
					name: '金额',
					nameLocation: 'end',
					nameTextStyle: {
						align: 'right'
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						formatter: '{value} k'
					}
				},
				legend: {
					top: 20,
					left: '15%',
					data: ['订单总额']
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'none'
					},
					backgroundColor: '#ffffff',
					textStyle: {
						color: ['#000']
					}
				},
				series: [{
					name: '订单总额',
					data: [3, 6, 9, 12, 16, 15, 13, 21, 8, 5, 12, 18, 9, 7, 12],
					type: 'bar',
					showSymbol: false,
					smooth: true,
					itemStyle: {
						normal: {
							color: "rgba(81, 138, 242, 1)"
						},
					}
				}]
			}, true);
			var option = {
				title: {
					text: '数据统计',
					left: '8%'
				},
				xAxis: {
					type: 'category',
					name: '时间',
					splitLine: {
						interval: 0,
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
					boundaryGap: false,
					data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
					axisLabel: {
						formatter: '{value} 日'
					}
				},
				yAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							type: 'dashed'
						}
					},
					name: '金额',
					nameLocation: 'end',
					nameTextStyle: {
						align: 'right'
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						formatter: '{value} k'
					}
				},
				legend: {
					top: 20,
					right: '100',
					data: ['黑金奖', '白金奖', '黄金奖']
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'none'
					},
					backgroundColor: '#ffffff',
					textStyle: {
						color: ['#000']
					}
				},
				series: [{
					name: '黑金奖',
					data: [13, 15, 13, 15, 13, 15, 13, 21, 18, 15, 16, 18, 19, 17, 22],
					type: 'line',
					showSymbol: false,
					smooth: false,
					itemStyle: {
						normal: {
							color: "rgba(189, 92, 238, 1)"
						},
					}
				}, {
					name: '白金奖',
					data: [3, 15, 13, 5, 3, 2, 14, 16, 8, 5, 12, 8, 12, 7, 1],
					type: 'line',
					showSymbol: false,
					smooth: true,
					itemStyle: {
						normal: {
							color: "rgba(250, 174, 168, 1)"
						},
					},
					areaStyle: {
						normal: {
							color: 'rgba(250, 174, 168, 0.2)'
						}
					},
				}, {
					name: '黄金奖',
					data: [3, 15, 13, 5, 8, 8, 11, 12, 8, 15, 12, 8, 10, 7, 10],
					type: 'line',
					showSymbol: false,
					smooth: true,
					itemStyle: {
						normal: {
							color: "rgba(118, 198, 255, 1)"
						},
					},
					areaStyle: {
						normal: {
							color: 'rgba(118, 198, 255, 0.2)'
						}
					},
				}]
			};
			chart2.setOption(option);
		});
		</script>
</body>

</html>